<script setup lang="ts">
import {ref, onMounted} from "vue";
import { dsrfx } from "../index";
/*顶部table切换*/
const tabs = [
  {label: "数量", value: "device"},
  {label: "当事人类型 数量 涉及案件数量", value: "situation"},
  {label: "当事人类型 数量 涉及案件数量", value: "guide"},
];
const activeTab = ref("device");

// 表格列定义
const tableColumns = 
  [
    {label: "当事人类型", prop: "name"},
    {label: "涉及纠纷数量", prop: "zs"},
    {label: "纠纷高发点", prop: "dq"},
    
  ]

// 示例数据
const tableData = ref({
  device: [
    {level: "少数民族", concerned: '906605人', opinion: "906605件",position: "昭通",},
    {level: "外籍当事人", concerned: '99人', opinion: "99件",position: "昆明",},
    {level: "失信人员", concerned: '5人', opinion: "5件",position: "临沧",},
    {level: "两类人员", concerned: '17人', opinion: "16件",position: "怒江",},
    
    // {level: "物业管理纠纷", concerned: '10405件(3.52%)', opinion: "无",},
    // {level: "房屋宅基地纠纷", concerned: '6156件(2.08%)', opinion: "无",},
    // {level: "劳动争议纠纷", concerned: '5923件(2.00%)', opinion: "无",},
    // {level: "生产经营纠纷", concerned: '2758件(0.93%)', opinion: "无",},
   
    
  ],
  // situation: [
  //   {level: "重大", description: '劳动报酬未支付',occurrenceTime: "2025-05-24 10:13:45", value: 3}
  // ],
  // guide: [
  //   {ajly: "公安机关委托移送", ajlb: '邻里纠纷',ajs: 158, value: 1}
  // ],
});

const getData = () => {

};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="right-top-container">
    <!-- 顶部三块tab -->
    <!-- <div class="custom-tabs">
      <div
          v-for="tab in tabs"
          :key="tab.value"
          :class="['tab-btn', { active: activeTab === tab.value }]"
          @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </div>
    </div> -->

    <!-- 表格 -->
    <div class="custom-table">
      <table>
        <thead>
        <tr>
          <th v-for="col in tableColumns" :key="col.prop">{{ col.label }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in dsrfx" :key="row.id || row.name">
          <td v-for="col in tableColumns" :key="col.prop">{{ row[col.prop] }}</td>
        </tr>
        </tbody>
      </table>
      <div v-if="dsrfx.length === 0" class="empty-text">暂无数据</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.right-top-container {
  background: rgba(6, 44, 33, 0.95);
  border-radius: 10px;
  padding: 16px 12px 12px 12px;
  color: #7eb7fd;
  font-size: 15px;
}

.custom-tabs {
  display: flex;
  margin-bottom: 12px;

  .tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    margin-right: 8px;
    background: rgba(31, 99, 163, 0.2);
    border-radius: 6px 6px 0 0;
    color: #7eb7fd;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      background: linear-gradient(90deg, #1f63a3 60%, #092a4a 100%);
      color: #ffd700;
      font-weight: bold;
    }
  }
}

.custom-table {
  background: rgba(31, 99, 163, 0.12);
  border-radius: 6px;
  height: 220px;
  overflow: auto;
  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      border-bottom: 1px solid rgba(31, 99, 163, 0.2);
      padding: 6px 8px;
      text-align: center;
      color: #7eb7fd;
    }

    th {
      color: #7eb7fd;
      font-weight: 600;
      background: rgba(31, 99, 163, 0.18);
    }

    tr:last-child td {
      border-bottom: none;
    }
  }

  .empty-text {
    text-align: center;
    color: #888;
    padding: 16px 0;
  }
}
</style>
